<template>
  <a-form layout="horizontal" :form="form" class="form" >
    <a-row :gutter="8">
      <a-col :md="8" :sm="24">
        <a-form-item label="参数标识" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-decorator="[
              'paramKey',
              {rules: [{ required: true, message: '请输入参数标识', whitespace: true}], initialValue: this.initData.paramKey}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="参数名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            placeholder=""
            v-decorator="[
              'paramName',
              {rules: [{ required: true, message: '请输入参数名称', whitespace: true}], initialValue: this.initData.paramName}
            ]"/>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="参数值" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            placeholder=""
            v-decorator="[
              'paramValue',
              {rules: [{ required: true, message: '请输入参数值', whitespace: true}], initialValue: this.initData.paramValue}
            ]"/>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="8" :sm="24">
        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            placeholder="请选择"
            allowClear
            v-decorator="[
              'status',
              {rules: [{ required: true, message: '请输入状态', whitespace: true}], initialValue: this.initData.status}
            ]"
          >
            <a-select-option value="0">禁用</a-select-option>
            <a-select-option value="1">启用</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="是否可编辑" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            placeholder="请选择"
            allowClear
            v-decorator="[
              'fixed',
              {rules: [{ required: true, message: '请输入是否可编辑', whitespace: true}], initialValue: this.initData.fixed}
            ]"
          >
            <a-select-option value="0">否</a-select-option>
            <a-select-option value="1">是</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="所属分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-decorator="[
              'classify',
              {rules: [{ required: false, message: '请输入所属分类', whitespace: true }], initialValue: this.initData.classify}
            ]"/>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="8" :sm="24">
        <a-form-item label="所属组织" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-tree-select
            showSearch
            style="width: 100%"
            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择"
            allowClear
            treeDefaultExpandAll
            treeNodeFilterProp="title"
            :treeData="orgSelectTreeData"
            @search="onSearchOrgSelectTree"
            @select="onSelectOrgSelectTree"
            v-decorator="[
              'orgId',
              {rules: [{ required: false, message: '请输入所属组织', whitespace: true}], initialValue: this.initData.orgId}
            ]"
          >
          </a-tree-select>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            style="width: 100%"
            v-decorator="[
              'orderNo',
              {rules: [{ type: 'number', required: false, message: '请输入排序', whitespace: true}], initialValue: this.initData.orderNo}
            ]"/>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="24" :sm="24">
        <a-form-item label="备注" :labelCol="{xs: { span: 24 },sm: { span: 3 }}" :wrapperCol="{xs: { span: 24 },sm: { span: 21 }}">
          <a-textarea
            placeholder=""
            :rows="4"
            v-decorator="[
              'remarks',
              {rules: [{ required: false, message: '请输入备注', whitespace: true}], initialValue: this.initData.remarks}
            ]"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8" :style="{display:'none'}">
      <a-col :md="8" :sm="24">
        <a-form-item label="参数ID" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            disabled
            v-decorator="[
              'sysId',
              {rules: [{ type: 'number', required: false, message: '请输入参数ID', whitespace: true}], initialValue: this.initData.sysId}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import { getOrgSelectTree } from "@/services/system/api"
import moment from 'moment'

export default {
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 9 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      orgSelectTreeData: [],
      form: this.$form.createForm(this),
      initData: {}
    }
  },
  props: {
    paramsInfo: {
      type: Object,
      default: () => {},
      required: false
    }
  },
  created () {
    // 数据初始化
    // 数据字典初始化
    if (this.paramsInfo) {
      this.initData = this.paramsInfo
    } else {
      this.initData = {}
    }
    const orgParams = {}
    // 下拉组织树初始化
    this.$http.post(getOrgSelectTree,orgParams).then(res => {
      this.orgSelectTreeData = res.result
    })
  },
  methods: {
    moment,
    onSearchOrgSelectTree () {
      console.log(...arguments)
    },
    onSearchIconSelectTree () {
      console.log(...arguments)
    },
    onSelectOrgSelectTree () {
      console.log(...arguments)
    }
  }
}
</script>
